<template>
  <div>
    <h1>app.vue</h1>
    <h3>我是app里的h3</h3>
    <h4>我是app.h4</h4>
    <p>app里的p</p>

    <son />
  </div>
</template>

<script>
import son from './components/son.vue'
export default {
  components: {
    son
  }
}
</script>

<style scoped>
/* scoped只会给当前组件里写过的标签加上 data-v-hash值，没写的没有 */
/* 换句话说就是子组件里除了根标签以外的标签，加不上这个属性 */

/* 就让p标签这个样式穿透给son里面去用 */
/* 它叫：深度作用选择器 
    写法一： >>>
    写法二： /deep/
    写法三： ::v-deep （推荐）

*/

/*  如果加了深度选择器，这个样式会从以前的交集：  
          p[data-v-hash] 变成 
    后代选择器
          [data-v-hash] p  代表只要有这个行内属性的后代 p标签都能匹配上
    son根标签有这个行内属性，然后它里面的p就是它的后代，所以son里面的p能用到这个样式
*/
::v-deep p {
  color: red;
}


/* 因为如果没加深度作用选择器，它还是交集，穿透不进去 */
::v-deep h3 {
  color: orange;
}

h4 {
  color: blue;
}

</style>